<template>
	<view class="content page" :style="{'--color': color,'--colors':colors}">
		<status-bar title='我的记录'></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="nav_top_box" :style="{top:navHeight+'px'}">
			<view class="navlists" :style="{'--color': color}" :class="navTab==520?'navAction thmeColor':''" @click="navclick(520,0)"><text>全部</text></view>
			<!-- <view class="navlists" :style="{'--color': color}" :class="navTab==2?'navAction thmeColor':''" @click="navclick(2,1)"><text>待审核</text></view>
			<view class="navlists" :style="{'--color': color}" :class="navTab==999?'navAction thmeColor':''" @click="navclick(999,2)"><text>已回复</text></view> -->
		<!-- 	<view class="navlists" :style="{'--color': color}" :class="navTab==5?'navAction thmeColor':''" @click="navclick(5,3)"><text>待支付</text></view> -->
			<view class="navlists" :style="{'--color': color}" :class="navTab==0?'navAction thmeColor':''" @click="navclick(0,1)"><text>待完成</text></view>
			
			<view class="navlists" :style="{'--color': color}" :class="navTab==1?'navAction thmeColor':''" @click="navclick(1,2)"><text>已完成</text></view>
			
			<view class="Advertising_article thmeBg" :style="{'--color': color,left: 33.33 * positions+'%'}"></view>
			<!-- <view class="Advertising_article thmeBg" :style="{'--color': color,left: 33.33 * positions+'%'}"></view> -->
		</view>
		
		<view class="discount_coupon_list">
			<view class="reList">
				<view class="reItem" v-for='(item,index) in pageData' :key='index'>
					<view class="d-flex j-sb">
						<text class="reName">{{item.sncode_prize_name}}</text>
						<text class="reState" v-if='item.sncode_flag == 0' @click="getCode(item.sncode_sn,item.sncode_src,index,item.sncode_id)">待完成</text>
						<text class="reState" v-if='item.sncode_flag == 1'>已完成</text>
						<text class="reState" v-if='item.sncode_flag == 2'>未通过</text>
						<text class="reState" v-if='item.sncode_flag == 3'>审核中</text>
						<text class="reState" v-if='item.sncode_flag == 4'>已撤回</text>
						<view class="bgcolor white bor_radius_10" style="padding:6px 6px" 
						 v-if='item.sncode_flag == 5' 
						 @click="nowPlay(item.sncode_id,item.jump_pay,item.jump_url)">待支付</view>
					</view>
					<view class="flex-box flex-between align-center">
						<view class="reTime">{{item.sncode_addtime}}</view>
						<view class="flex-box align-center">
							<view class="qxbtn" @click="qxbtn(index,item.sncode_id)" v-if="item.sncode_flag == 0">撤回</view>
							<view class="qxbtn" @click="getCode(item.sncode_sn,item.sncode_src,index,item.sncode_id)" v-if='item.sncode_flag == 0'>核销码</view>
						</view>
					</view>
					<view v-if='item.sncode_content' style="overflow: hidden;">"<text>{{item.sncode_content}}</text>"</view>
					<view class="tipTime" v-if='item.sncode_flag == 1'>完成时间：{{item.sncode_usedtime}}</view>


					<!-- 已审核（已操作/已完成） -->
					<view class="reTip" @click="showSlide(item.sncode_id)">
						<text v-if='slideId != item.sncode_id'>点击显示更多信息</text>
						<text v-if='slideId == item.sncode_id'>点击隐藏更多信息</text>
						<image :src="staticUrl+'/images/jh_up/reArrow.png'" class="reArrow" :class="slideId == item.sncode_id?'trRotate':''"></image>
					</view>
					<view class="reMsg" :class="slideId == item.sncode_id?'slideShow':''">
						<view v-for='(reserve,index_r) in item.sncode_remark' :key='index_r'>
							<view v-if="reserve.isImg" style="width: 100%;" class="flex-box">
								<text class="msgName">{{reserve.title}}：</text>
								<view class="img-box flex">
									<image v-for="(img,i) in reserve.value.split('，')" @click="prev(i,reserve.value.split('，'))" :key='i' class="msgImg" :src="imgUrl+img" mode="widthFix"></image>
								</view>
							</view>
							<view class="flex-box" v-else>
								<text class="msgName">{{reserve.title}}：</text>
								<view class="msgDetail flex">{{reserve.value}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 提货码弹窗 start -->
		<view class="mask flex-box flex-center align-center" v-if="getCodes" @click="getCode1">
			<view @click.stop class="pickup_code_pop" :style="{'background': 'url('+staticUrl+'/images/pickup_code_pop_bg.png)','background-size':'100% 100%'}">
				<view class="pickup_code_box">
					<view class="txt">核销二维码</view>
					<image :src="imgUrl+codeImg" class="code-img" mode="aspectFit"></image>
					<view class="num">{{pickCode}}</view>
					<view class="info">到达活动现场后，出示该二维码核销。</view>
				</view>
				<view @click="getCode1">
					<text class="iconfont icon-guanbi"></text>
				</view>
			</view>
		</view>

		<showModel v-if='showModal' @cancelFunc='showModal=false' type='99'
			@certain='delSure'
			title='是否确定取消预约？' 
			msg='  '
			btn1='点错了' 
			btn2='我很确定'></showModel>
		
		<empty v-if='nothing' type='1' cat='3' msg='还没有相关数据哦~'></empty>
		<view class="DiLine" v-if="showline">------ 我是有底线的 ------</view>
	</view>
</template>
<script>
	var timer,that;
	export default {
		data() {
			return {
				navHeight:getApp().globalData.navHeight,
				color: getApp().globalData.color,
				colors: getApp().globalData.color_aid,
				navTab: 520,
				positions:0,
				vid: '',
				Advertising_article_style: '',
				pageData: '',
				nothing: false,
				pageindex: 1,
				bottomtip: false,
				showline: false,
				toTop: false,
				bid: uni.getStorageSync('bid'),
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				slideId: '', // 点开表单id
				getCodes: false, // 是否显示二维码弹窗
				codeImg: '',
				pickCode: '',
				qxindex: "", //取消预约按钮索引
				showModal: false,
				sncode_id:'',
				palyInfo:{}
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		onShow() {
			
		},
		onBackPress() {
			clearInterval(timer);
		},
		onLoad(e) {
			that = this
			that.vid = uni.getStorageSync("vid");
			that.getPageData('', 0)
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
		onReachBottom() {
			if (that.bottomtip) {
				uni.showLoading({
					mask: true,
					title: "列表加载中..."
				})
				that.pageindex = that.pageindex + 1;
				that.getPageData(that.navTab, 1)
			}
		},
		methods: {
			nowPlay(sncode_id,pay,url){
				let that = this;
				if(pay == 1){
					window.open(res.url)
				}else{
					uni.showLoading({title:'加载中~',mask:true,})
					that.$http.post({
						url:'/accountPay/getSncodePay',
						data:{
							sncode_id:sncode_id,
						}
					}).then(res=>{
						if(res.code == '100'){
							that.palyInfo = res.data;
							uni.getProvider({
								service: 'payment',
								success(resp) {
									uni.requestPayment({
										provider:resp.provider[0],
										orderInfo:{sncode_id:sncode_id},
										timeStamp:that.palyInfo.timeStamp,
										nonceStr:that.palyInfo.nonceStr,
										package:that.palyInfo.package,
										signType:that.palyInfo.signType,
										paySign:that.palyInfo.paySign,
										success(re) {
											uni.showToast({
												title:'支付成功',
												mask:true,
												icon:'none',
												success() {
													setTimeout(()=>{
														uni.navigateBack({
															delta:1
														})
													},800)
												}
											})
										},
										fail(err) {
											uni.navigateBack({
												delta:1
											})
										}
									})
								}
							})
						}else{
							uni.showToast({
								title:res.msg,
								mask:true,
								icon:'none'
							})
						}
					})
				}				
			},
			
			
		
			
			prev(i,imgArry){
				if (imgArry) {
					let arr = [];
					for (let i in imgArry) {
						arr.push(that.imgUrl + imgArry[i])
					}
					uni.previewImage({
						current: i,
						urls: arr,
						indicator: "number",
						loop: true
					})
				}
			},
			getCode: function(code, imgSrc, index, sncodeid) {
				/**
				 * 获取提货码
				 * **/
				that.getCodes = true;
				that.pickCode = code;
				that.codeImg = imgSrc;
				timer = null;
				timer = setInterval(function() {
					that.$http.post({
						url: '/SRA_CustomerForm/getCustomFormState',
						data: {
							sncode_id: sncodeid,
							v_id: that.vid,
							VeriCode: that.bid
						}
					}).then(res => {
						if (res.code == 200) {
							that.getCodes = false;
							if (that.navTab == 520) { // 如果当前是全部订单则修改当前订单状态，其他状态则删除该条订单
								that.pageData[index].sncode_flag = res.data;
							} else {
								that.pageData.splice(index, 1)
								if (that.pageData.length < 1) {
									that.nothing = true
								}
							}
							that.pageData = [].concat(that.pageData)
							clearInterval(timer);
						}
					})
				}, 2000)
			},
			getCode1() {
				that.getCodes = false;
				clearInterval(timer);
			},
			showSlide(id) {
				if (that.slideId == id) {
					that.slideId = -1
				} else {
					that.slideId = id;
				}
			},
			navclick(i, positions) {
				var param = i;
				that.navTab = i;
				that.slideId = -1
				if (i == 520) {
					param = ''
				}
				that.pageData = []
				that.pageindex = 1
				that.bottomtip = false
				that.showline = false
				that.positions = positions
				that.getPageData(param, 0)
			},
			getPageData(status, type) {
				that.$http.post({
					url: '/zzj_singleSaleApi/getCustomFormList',
					data: {
						jsCode: that.vid,
						sncode_type: status, // 状态 0待审核 1已完成 2审核未通过
						page: that.pageindex,
						size: 10,
						VeriCode: that.bid
					}
				}).then(res => {
					var data = res.data.formList;
					if (res.code == '100') {
						if (data && data.length > 0) {
							data.forEach((item, index) => {
								if (item.sncode_remark.length > 0) {
									item.sncode_remark.forEach((sn, i) => {
										if (sn.value.indexOf('/Uploads') > -1 && sn.value.indexOf('.') > -1) {
											sn.isImg = true
										}
									})
								}
							})
							if (type == 0) {
								that.pageData = data
							} else {
								that.pageData = that.pageData.concat(data)
							}
						}
						that.nothing = false;
						if (!that.pageData || that.pageData.length < 1) {
							that.nothing = true;
						}
						if (that.pageData.length > 9) {
							that.bottomtip = true
						}
						if (!data) {
							that.bottomtip = false;
						}
						if ((that.pageData.length > 0 && !data) || (that.pageData.length > 0 && that.pageData.length < 11)) {
							that.showline = true
						}
					} else {
						if (that.pageData == '' || that.pageData.length < 1) {
							that.nothing = true
							that.bottomtip = false
						}
					}
					uni.hideLoading()
				})
			},
			delSure() {
				that.$http.post({
					url: '/zzj_singleSaleApi/cancelOnlineOrder',
					data: {
						VeriCode: that.bid,
						sncode_id: that.sncode_id,
						v_id: that.vid
					}
				}).then(res => {
					if (res.code == 100) {
					  uni.showToast({
					  	icon:"none",
						title: res.data
					  })
					  that.showModal = false
					  if (that.navTab == 520) { // 如果当前是全部订单则修改当前订单状态，其他状态则删除该条订单
					  	that.pageData[that.qxindex].sncode_flag = 1;
					  } else {
					  	that.pageData.splice(that.qxindex, 1)
					  	if (that.pageData.length < 1) {
					  		that.nothing = true
					  	}
					  }
					}
					if (res.code == 101) {
					  uni.showToast({
					  	icon: "none",
						title: res.data
					  })
					}
				})
			},
			// 取消预约按钮
			qxbtn(index ,sncode_id) {
				that.qxindex = index
				that.sncode_id = sncode_id
				that.showModal = true
			},
		},

	}
</script>

<style scoped lang="scss">
	.page{
		background-color: #F8F8F8;
		.pickup_code_pop{
			position: relative;
			width: 600upx;
			height: 800upx;
			padding-top: 30rpx;
			.pickup_code_box{
				width: 100%;
				height: 100%;
				.txt{
					text-align: center;
					padding: 30upx 0;
					font-size: 32upx;
				}
				.code-img{
					width: 440upx;
					height: 440upx;
					display: block;
					margin: 20rpx auto;
					background-color: #F8F8F8;
				}
				.num{
					text-align: center;
					font-size: 32rpx;
					line-height: 80rpx;
					color: #00A4EE;
				}
				.info{
					font-size: 20upx;color: #888888;text-align: center;
				}
			}
			.icon-guanbi{
				color: white;
				font-size: 60rpx;
				top: 20rpx;
				position: relative;
				z-index: 3;
			}
		}
	}

	.nav_top_box {
		width: 100%;
		height: 80upx;
		background: #FFFFFF;
		display: flex;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		color: #888888;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.navlists {
		width: 33.33%;
	}

	.navAction {
		position: relative;
	}

	.Advertising_article {
		width: 33.33%;
		height: 4upx;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: left .2s;
	}

	.discount_coupon_list {
		width: 100%;
		padding-top: 80upx;
	}

	.expire {
		font-size: 20upx;
	}

	.reItem {
		background: white;
		margin-top: 20upx;
		padding: 24upx 30upx;
	}

	.reName {
		color: #3A3A3A;
		font-size: 32upx;
	}

	.reTime {
		color: #888888;
		font-size: 28upx;
		line-height: 65upx;
	}

	.qxbtn {
		line-height: 46rpx;
		text-align: center;
		background-color: #F5F5F5;
		padding: 0 20rpx;
		width: 120rpx;
		margin-left: 20rpx;
		border-radius: 50rpx;
	}   

	.reState {
		float: right;
		color: #888888;
		font-size: 28upx;
	}

	.reTip {
		font-size: 20upx;
		color: #3A3A3A;
		margin-top: 20upx;
		position: relative;
		border-top: 2upx solid #E2E2E2;
		padding-top: 20upx;
	}

	.tipTime {
		color: #888888;
		font-size: 20upx;
		margin-top: 10upx;
	}

	.reArrow {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateX(-50%);
		width: 23upx;
		height: 12upx;
		transition: all .3s;
	}

	.reMsg {
		height: 0;
		overflow: hidden;
		box-sizing: border-box;
		transition: all .3s;
		border-top: 1px solid transparent;
	}

	.slideShow {
		height: auto;
		transition: all .3s;
		border-top: 1px solid #E2E2E2;
		margin-top: 20upx;
	}

	.trRotate {
		transform: rotate(180deg);
		transform-origin: 6upx 6upx;
		transition: all .3s;
	}

	.reMsg>view {
		display: flex;
		margin-top: 20upx;
	}

	.msgName {
		color: #8D8D8D;
		font-size: 24upx;
		min-width: 140upx;
		text-align: right;
	}
	.img-box{
		flex-wrap: wrap;
		width: 100%;
		padding-top: 10rpx;
		.msgImg {
			width: 150rpx;
			height: 150rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}
	}

	

	.msgDetail {
		color: #3A3A3A;
		font-size: 24upx;
		flex: 1;
	}
</style>
